import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom';
const persons = [
  { id: 0, name: 'Michelle', friends: [1, 2, 3] },
  { id: 1, name: 'Sean', friends: [0, 3] },
  { id: 2, name: 'Kim', friends: [0, 1, 3], },
  { id: 3, name: 'David', friends: [1, 2] }
];

const find = id => persons.find(item => item.id === id)
export default class CursionRoute extends React.Component {

  render() {
    return (
      <Router>
        <Person match={{ params: { id: 2 }, url: '' }} />
      </Router>
    )
  }

}

class Person extends React.Component {
  render() {
    console.log(this.props.match.params.id);
    let person = find(this.props.match.params.id)
    return (
      <div>
        <h3>{person.name}'s Friends</h3>
        <ul>
          {
            person.friends.map(id => (
              <li>
                <Link to={`${this.props.match.url}/${id}`}>
                  {find(id).name}
                </Link>
              </li>
            ))
          }
        </ul>
        {/* <Route path={`${this.props.match.url}/:id`} component={Person} /> */}
        {JSON.stringify(this.props.match)}
        <Route path={`${this.props.match.url}/cursions/:id`} component={Person} />
      </div>
    )
  }
}